<cfset mySelf = viewState.getValue("mySelf") />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Demo</title>

<script type="text/javascript">
	var djConfig = {isDebug: true,
		debugContainerId : "resourceHistory" };
</script>
<script type="text/javascript" src="/inc/dojo/dojo.js"></script>
<script language="JavaScript" type="text/javascript">
	dojo.require("dojo.widget.LayoutContainer");
	dojo.require("dojo.widget.ContentPane");
	dojo.require("dojo.widget.LinkPane");
	dojo.require("dojo.widget.SplitContainer");
	dojo.require("dojo.widget.ColorPalette");
	dojo.require("dojo.widget.TabContainer");
	dojo.require("dojo.lfx.rounded");
	dojo.hostenv.writeIncludes();
<cfoutput>
	function loadResource(resourceAndRevision) {
		if(resourceAndRevision){
			//alert(resourceAndRevision);
			dojo.byId('resourceFrame').src = ('#myself#repo.resource&repoPath='+resourceAndRevision);
			dojo.widget.byId('resourceHistory').setUrl('#myself#repo.resourcehistory&repoPath='+resourceAndRevision);
		}
		return false;
	}

	dojo.addOnLoad(function(){
		dojo.lfx.rounded({
				tl:{ radius:10 },
				bl:{ radius:10 },
				tr:{ radius:10 },
				br:{ radius:10 }
			}, 
			["resourceHistory","topBar","bottomBar"]
		);});
</cfoutput>
</script>
  <style>
    html, body{	
		width: 100%;	/* make the body expand to fill the visible window */
		height: 100%;
		overflow: hidden;	/* erase window level scrollbars */
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		font-family:Arial;
    }
	.dojoSplitPane{
		margin: 5px;
	}
	#rightPane {
		margin: 0;
	}

.rounders {
	border:1px solid #ccc;
	padding:5px;
	margin-top:5px;
	margin-bottom:5px;
}

div.dojoSplitContainerSizerH,
div.dojoSplitContainerSizerV {
	font-size: 1px;
	background-color: #ffffff;
	border: 1px solid;
	border-color: #ffffff;
	margin: 0;
}

   </style>
</head>
<body>
<div dojoType="LayoutContainer"
	layoutChildPriority='top-bottom'
	style="width: 100%; height: 100%;">
	<div dojoType="ContentPane" layoutAlign="top" style="padding-bottom:5px;">
		<div dojoType="ContentPane" id="topBar" layoutAlign="top" style="background-color: #274383; color: white;" class="rounders">
			<strong>cfjasper repository browser</strong>
		</div>
	</div>
	<div dojoType="ContentPane" id="bottomBar" layoutAlign="bottom" style="background-color: #274383; color: white;" class="rounders">
		bottom bar
	</div>
	<div dojoType="SplitContainer"
		orientation="horizontal"
		sizerWidth="5"
		activeSizing="0"
		layoutAlign="client"
	>
			<div dojoType="LinkPane" id="repoTree" href="<cfoutput>#myself#repoTree</cfoutput>" executeScripts="true" scriptSeparation="true" >
			</div>

		<div dojoType="SplitContainer"
			id="rightPane"
			orientation="vertical"
			sizerWidth="5"
			activeSizing="0"
			sizeMin="50" sizeShare="80"
		>
			<div id="mainTabContainer" dojoType="TabContainer" sizeMin="20" sizeShare="70">
			
				<div id="resourceFrameWrap" dojoType="ContentPane" label="Resource">
					<iframe src="" id="resourceFrame" width="98%" height="98%" style="border:0px" frameborder="false" marginheight="0" marginwidth="0"></iframe>
				</div>
				
				<a id="tab2" dojoType="LinkPane" href="tab2.html">Tab 2</a>
			</div>
			<div dojoType="ContentPane" id="resourceHistoryPane" sizeMin="20" sizeShare="30">
				<div dojoType="ContentPane" id="resourceHistory" class="rounders">
				This is just a test of the various containers nested inside each other.
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
	